<template>
  <TableProvider ref="tableRef"
                 :filters="filters"
                 :columns="columns"
                 :actions="actions"
                 :records="records"
                 :loading="loading"
                 :total="total"
                 :ready="ready"
                 :clearable="false"
                 @search="handleSearch">
  </TableProvider>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import Location from "@basic/Location.vue";
import DefaultShippingAddressSwitch from "@/components/table/column/DefaultShippingAddressSwitch.vue";
import { TableProvider } from "@tablra";

Vue.component(Location.name, Location)
Vue.component(DefaultShippingAddressSwitch.name, DefaultShippingAddressSwitch)

export default {
  name: "ShippingAddressDefaults",
  components: {
    TableProvider
  },
  props: {
    value: Object
  },
  data () {
    return {
      filters: [{
        name: "contactName",
        component: {
          placeholder: "输入联系人",
        }
      }, {
        name: "contactMobile",
        component: {
          placeholder: "输入联系电话",
        }
      },],
      columns: [{
        "name": "contactName",
        "label": "联系人",
        "type": "text"
      }, {
        "name": "contactMobile",
        "label": "联系电话",
        "type": "text"
      }, {
        "name": "address",
        "label": "地址",
        "type": "text"
      }, {
        "name": "isDefault",
        "label": "默认地址",
        "type": "advance",
        "width": "80px",
        "component": {
          "@name": "DefaultShippingAddressSwitch",
          "value": "#{row => row}",
        }
      }],
      actions: [],
      records: [],
      loading: false,
      total: 0,
      ready: true,
      filterData: {
        page: 1,
        size: 10,
        "sort": [{ "asc": false, "name": "createAt" }]
      }
    }
  },
  computed: {
    customerId () {
      return this.value?.customerId
    }
  },
  created () {
    this.search();
  },
  methods: {
    async search () {
      const url = "/basic/shippingAddress/search";
      const filterData = {
        customerId: this.customerId,
        ...this.filterData
      };

      const { code, message, data } = await axios.post(url, filterData)
      if (0 !== code) {
        this.$message({ message: message, type: "errror" });
        return;
      }
      this.records = data.records;
      this.total = data.total;
    },
    handleSearch (filterData) {
      this.filterData = filterData;
      this.search();
    }
  },
  watch: {
    value () {
      this.search()
    }
  }
}
</script>